<template>
  <div draggable="true" 
    class="kw-component"
    v-on:mousedown="mouseDown" 
    v-on:dragstart="moveStart"
    v-on:mouseout="mouseOut"
    v-on:mouseover="hover">
    <slot></slot>
  </div>
</template>

<script>
export default {
    props: {
        value: {
            default() {
                return {}
            }
        }
    },
    methods: {
        mouseDown(e) {
            this.$emit('on-mousedown', e)
        },
        moveStart(e) {
            this.$emit('on-dragstart', e)
        },
        mouseOut(e) {
            e.stopPropagation();
            e.preventDefault()
            e.currentTarget.classList.remove('hover')
        },
        hover(e) {
            e.stopPropagation();
            e.preventDefault()
            e.currentTarget.classList.add('hover')
        },
    }
}
</script>

<style>

</style>